<template>

<span v-for="item in list">
<!--  {{item}}-->
  <el-sub-menu :index="item.path" v-if="item.permissionType=='M' && item.permissionList.length!=0" >
    <!--         一级菜单信息-->
    <template #title>
  <div style="line-height: 20px;margin-right: 15px" v-html="item.permissionIcon"></div>
      <span>{{item.permissionName}}</span>
    </template>
    <!--          判断子级是否为空-->
            <span v-if="item.permissionList!=null">
<!--              循环子级-->
              <span v-for="aa in item.permissionList">
<!--                判断子菜单类型-->
                <!--                如果为M，即目录类型，则是el-sub-menu类型 不需要路由路径-->
              <el-sub-menu :index="aa.path" v-if="aa.permissionType=='M' && item.permissionList.length!=0">
                 <template #title>
                  <el-icon ><component :is="aa.sysMenuIcon"></component></el-icon>
                  <span>{{aa.permissionName}}</span>
                  </template>
                <!--                  既然是m类型，则直接调用-->
                  <treeItem2  :list="aa.permissionList"></treeItem2>
              </el-sub-menu>

                <!--                如果为C，即菜单类型，则是el-menu-item类型 需要路由路径-->
                <el-menu-item  :index="aa.path" v-if="aa.permissionType=='C'">
                 <template #title>
                  <el-icon ><component :is="aa.sysMenuIcon"></component></el-icon>
                  <span>{{aa.permissionName}}</span>
                  </template>
              </el-menu-item>

                </span>
            </span>
  </el-sub-menu>

    <!-- 如果为C，即菜单类型，则是el-menu-item类型 需要路由路径-->
  <el-menu-item :index="item.path" v-if="item.permissionType=='M' && item.permissionList.length==0">
     <template #title>
      <div style="line-height: 20px" v-html="item.permissionIcon"></div>
          <span style="margin-left: 5px">{{item.permissionName}}</span>
      </template>
  </el-menu-item>

  <!-- 如果为C，即菜单类型，则是el-menu-item类型 需要路由路径-->
  <el-menu-item :index="item.path" v-if="item.permissionType=='C'">
     <template #title>
      <div style="line-height: 20px" v-html="item.permissionIcon"></div>
          <span style="margin-left: 5px">{{item.permissionName}}</span>
      </template>
  </el-menu-item>

  </span>
</template>
<script setup lang="ts">

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})

</script>
